<template>
	<view class="container">

		<view class="title-top">
			中考志愿填报助手
		</view>
		<!-- 消息体 -->
		<view>
			<view v-for="(item,index) in maslist" :key="index">
				<view class="mas-box">
					<view class="user-mess" v-if="item.cateId=='user'">
						<view class="user-mess-text">
							{{item.mass}}
						</view>
					</view>
					<view class="ai-mess" v-if="item.cateId=='ai'">
						<view class="ai-mess-text" v-show="item.mass" v-html="item.mass">
						</view>
						<view class="ai-mess-text" v-show="!item.mass" v-html="printedContent">
						</view>
					</view>
				</view>
			</view>

			<view style="height: 300rpx;
	width: 30rpx;" class="count_big_box" id="count_big_box">
			</view>
		</view>

		<!-- 猜您想猜 -->
		<!-- :style="{width: '100%'}" -->
		<u-popup v-model:show="showwen" mode="center" closeable='true' round='10' custom-style="width:90%;">
			<view class="text-all">
				<view class="text-box">
					<view class="text-box-left">
						<image src="/src/static/it.png" mode="" class="imga"></image>
					</view>
					<view class="text-box-title">
						<span style="color: #9c3158;">HI</span>
						<span style="color: #142f74;">，我是招生助理！</span>

					</view>

				</view>
				<view class="mess-box">
					<view class="problem-box">
						<view class="problem-top">
							<view class="top-left">
								<image src="/src/static/wen.png" mode="" class="img-wen"></image>
								<view class="left-text">
									猜您想问
								</view>
							</view>
							<view class="top-right" @click="oncheng">
								<image src="/src/static/huan.png" mode="" class="img-huan"></image>
								<view class="right-text">
									换一批
								</view>
							</view>
						</view>
						<div class="loading-container" v-show="chengLoading">
							<div class="loading-dots">
								思考中
								<span class="dot"></span>
								<span class="dot"></span>
								<span class="dot"></span>
							</div>
						</div>
						<view class="box-item" v-for="(item,index) in chenglist" :key="index" v-show="!chengLoading">
							<view class="box-text" @click="onsenditem(item)">
								{{item}}
							</view>
						</view>
					</view>


				</view>
			</view>
		</u-popup>

		<view class="botton">
			<div class="loading-container" v-show="aiLoading">
				<div class="loading-dots">
					思考中
					<span class="dot"></span>
					<span class="dot"></span>
					<span class="dot"></span>
				</div>
			</div>
			<view class="buttoncss" @click="onwen">
				猜您想问
			</view>
			<view class="botton-input">
				<view class="input-box">
					<input class="inpuit-text" placeholder="请输入您想了解的问题" v-model="form.mass" maxlength="99" />
					<view @click="onsend" v-show="!aiLoading">
						<image src="@/static/send.png" mode="" class="go-img"></image>
					</view>
					<view @click="stopsend" v-show="aiLoading">
						<image src="@/static/send.png" mode="" class="go-img"></image>
					</view>
				</view>
			</view>
			<view class="botton-button">
				<view class="button">
					<image src="@/static/user.png" mode="" class="user-img"></image>
					<view class="button-text">
						1对1咨询专家
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { answersYourQuestions, generate } from '@/api/index';
	import { ref, computed, reactive, onMounted, type CSSProperties, nextTick, onBeforeUnmount, } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	const aiLoading = ref(false);   // 加载状态
	const showwen = ref(false);   // 加载状态
	const chengLoading = ref(false);   // 加载状态

	//引入pinia
	import { useTokenStore, useUserStore } from '@/stores';
	import { marked } from 'marked';
	const scrollToBottom = () => {
		uni.pageScrollTo({
			duration: 300,
			selector: '#count_big_box'
		})
	};
	const printedContent = ref(''); // 打印内容
	const uid = ref(''); // 

	let intervalId : ReturnType<typeof setInterval> | null = null; // 记录 intervalId
	const htmlContent = ref('');
	const score = ref('');
	//调用pinia中的token方法
	const tokenStore = useTokenStore()
	const getuser = useUserStore()


	let form = reactive({
		cateId: 'user',
		mass: '',
	});
	type Todo = {
		cateId : string
		mass : string
	}
	let datas = {
		cateId: 'user',
		mass: '',
	};
	interface HistoryData {
	}
	let maslist = ref<Todo[]>([])
	const chenglist = ref<HistoryData[]>([]); // 存储历史数据
	const stopsend = () => {
		uni.showToast({
			title: '思考中，请稍后……',
			icon: 'none',
		});
	}
	const onwen = () => {
		if (aiLoading.value) {
			uni.showToast({
				title: '思考中，请稍后……',
				icon: 'none',
			});
		} else {
			showwen.value = true
		}

	}
	const onsenditem = (items) => {
		if (aiLoading.value) {
			uni.showToast({
				title: '思考中，请稍后……',
				icon: 'none',
			});
		} else {
			form.mass = items
			onsend()
		}
	}
	const onsend = () => {
		aiLoading.value = true
		showwen.value = false
		if (!form.mass) {
			uni.showToast({
				title: '请输入问题',
				icon: 'none',
			});
			return;
		} else {
			if (htmlContent.value) {
				maslist.value.map(item => {
					console.log(item, '循环')
					if (item.cateId == 'ai') {
						if (!item.mass) {
							item.mass = htmlContent.value

						}
					}
				})
			}
			datas.mass = form.mass
			maslist.value.push({
				cateId: 'user',
				mass: datas.mass
			})

			// maslist.value=[...maslist.value,datas]
			form.mass = ''
			htmlContent.value = ''
			printedContent.value = ''
			uid.value = getuser.userInfo.userId
			let data
			console.log(maslist.value.length, 'sssssss')
			if (maslist.value.length == 1) {
				data = {
					issue: datas.mass,
					state: '0',
					uid: getuser.userInfo.userId
				};
			} else {
				data = {
					issue: datas.mass,
					state: '1',
					uid: getuser.userInfo.userId
				};
			}

			console.log('入参!!!!!!!', data)
			answersYourQuestions(data).then(res => {
				console.log(res.data, '返回值')
				maslist.value.push({
					cateId: 'ai',
					mass: ''
				})
				htmlContent.value = marked(res.data);
				console.log(htmlContent, 'ssss')

				typeContent(htmlContent.value)
				aiLoading.value = false;
				getcheng()

			})
		}
		// uni.navigateTo({ url: '/pages/AI_inquiry/index' });
	};


	// 打字效果实现
	const typeContent = async (content : string) => {
		let index = 0;
		const batchSize = 5; // 每次显示的字符数量

		intervalId = setInterval(async () => {
			if (index < content.length) {
				const nextChunk = content.slice(index, index + batchSize);
				printedContent.value += nextChunk;
				index += batchSize;
				await nextTick();
				scrollToBottom()
			} else {
				clearInterval(intervalId!);
			}
		}, 100);
	};
	const getcheng = (() => {
		generate(getuser.userInfo.userId).then(res => {
			chengLoading.value = false
			chenglist.value = res.data
		})
	})

	// 清理定时器
	onBeforeUnmount(() => {
		if (intervalId) {
			clearInterval(intervalId);
		}
	});
	const oncheng = () => {
		if (aiLoading.value) {
			uni.showToast({
				title: '思考中，请稍后……',
				icon: 'none',
			});
		} else {
			chengLoading.value = true
			getcheng()
		}
		// uni.navigateTo({ url: '/pages/AI_inquiry/index' });
	};

	onMounted(() => {
	});
	//onshow方法
	onShow(() => {
		console.log(getuser.userInfo.userId, 'onshow。。。。。。。。。')
	})

	onLoad((shou) => {
		if (shou.school) {
			form.mass = shou.score + '分，可以在报考' + shou.school + '?'
			onsend()
		} else {
			form.mass = shou.score + '分，可以在济南报考什么高中？'
			onsend()
		}

		// console.log(score, 'onLoad。。。。。。。。。')
		console.log(shou, 'onLoad。。。。。。。。。')
	})
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		// background-color: red;
		background-image: url('https://cw.jxfs365.com/appZhongKao/index-bg.png');
		background-size: cover;
		background-position: center;
		/* 可选，确保图片居中 */
		background-repeat: no-repeat;
		/* 可选，确保背景图片不重复 */
		// height: 100vh;
		min-height: 100vh;
		/* 设置body的高度为视口高度的100%，确保背景覆盖整个页面 */
		// margin: 0;
		/* 移除默认的margin */
		// padding: 0;
		/* 移除默认的padding */
		// margin-bottom: 160rpx;

		.title-top {
			text-align: center;
			padding-top: 107rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 40rpx;
			color: #000000;

		}


		.text-all {
			position: relative;
			width: 100%;

			.text-box {
				position: relative;
				margin-top: 59rpx;
				width: 100%;
				height: 180rpx;
				// margin-bottom: -100rpx;
				background-image: url('https://cw.jxfs365.com/appZhongKao/topbg.png');
				background-size: cover;
				background-position: center;
				/* 可选，确保图片居中 */
				background-repeat: no-repeat;

				.text-box-left {
					.imga {
						position: absolute;
						top: -50rpx;
						width: 135rpx;
						height: 143rpx;
					}
				}

				.text-box-title {
					padding: 20rpx;
					width: 100%;
					text-align: center;

				}


			}

			.mess-box {
				position: absolute;
				top: 100rpx;
				width: 100%;

				.problem-box {
					// margin-top: -100rpx;
					padding: 10rpx;
					// width: 690rpx;
					// height: 604rpx;
					background: linear-gradient(96deg, #EBFCFB, #FFFFFF);
					border-radius: 30rpx;
					border: 2px solid #FFFFFF;

					.problem-top {
						display: flex;
						justify-content: space-between;

						.top-left {
							display: flex;
							align-items: center;
							padding-left: 20rpx;

							.img-wen {
								width: 38rpx;
								height: 38rpx;
							}

							.left-text {
								padding-left: 10rpx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								font-size: 36rpx;
								color: #2B72D6;
								font-style: italic;
							}
						}

						.top-right {
							display: flex;
							align-items: center;
							padding-right: 20rpx;

							.img-huan {
								width: 29rpx;
								height: 25rpx;
							}

							.right-text {
								padding-left: 10rpx;
								font-family: Microsoft YaHei;
								font-weight: 400;
								font-size: 24rpx;
								color: #2B72D6;
							}
						}

					}

					.box-item {
						width: 90%;
						margin: 20rpx;
						// width: 632rpx;
						// height: 86rpx;
						background: #FFFFFF;
						// background-color: red;
						border-radius: 43rpx;

						.box-text {
							padding: 20rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							font-size: 36rpx;
							color: #000000;
						}
					}
				}
			}


		}

		.mas-box {
			.user-mess {
				display: flex;
				justify-content: flex-end;
				// padding-left: 20rpx;
				// margin-top: 20rpx;
				// margin-bottom: 20rpx;
				margin: 20rpx;
				// width: 279rpx;
				// height: 36rpx;
				// float: right;
				// width: 368rpx;
				// height: 91rpx;
				max-width: 90%;

				.user-mess-text {
					border-radius: 28rpx;
					background: #3F82F3;
					padding: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}

			.ai-mess {
				display: flex;
				// margin-top: 10rpx;
				// margin-bottom: 10rpx;
				margin: 20rpx;
				// width: 279rpx;
				// height: 36rpx;
				// float: left;
				max-width: 90%;

				.ai-mess-text {
					border-radius: 28rpx;
					background: #FFFFFF;
					padding: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					font-size: 36rpx;
					color: #000000;
					line-height: 48rpx;
					white-space: pre-wrap;
				}


			}
		}

		.botton {
			// background-color: #000000;
			background: #FFFFFF;
			width: 100%;
			position: fixed;
			bottom: 0;
			// bottom: 70rpx;
			padding: 20rpx;
			padding-left: 30rpx;

			.buttoncss {
				padding: 10rpx;
				border: 1rpx solid #3F82F3;
				display: inline;
				color: #3F82F3;
				border-radius: 10rpx;
				// margin-bottom: 50rpx;
			}

			.botton-input {
				margin-top: 20rpx;
				// padding-top: 20rpx;
				width: 688rpx;
				height: 92rpx;
				background: #f5f5f5;
				border-radius: 46rpx;
				border: 1px solid #f5f5f5;
				// text-align: center;
				align-items: center;
				display: flex;
				padding-left: 10rpx;

				.input-box {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.inpuit-text {
						width: 550rpx;
						height: 36rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						font-size: 36rpx;
						color: black;
					}

					.go-img {
						padding-right: 20rpx;
						width: 38rpx;
						height: 39rpx;

					}

				}
			}

			.botton-button {
				width: 100%;
				display: flex;
				justify-content: center;

				/* 水平居中 */
				.button {
					margin-top: 20rpx;
					display: flex;
					width: 250rpx;
					align-items: center;
					// width: 284rpx;
					// height: 69rpx;
					background: #FFFFFF;
					border-radius: 34rpx;
					border: 1px solid #E8E9F0;
					padding: 10rpx 15rpx;
					text-align: center;

					/* 文本居中 */
					/* 内边距 */
					.user-img {
						width: 36rpx;
						height: 36rpx;
					}

					.button-text {
						padding-left: 10rpx;
						width: 165rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						font-size: 26rpx;
						color: #000000;

					}

				}
			}
		}


	}
</style>
<style scoped>
	.loading-container {
		padding-bottom: 20rpx;
		padding-left: 10rpx;

	}

	.loading-dots {
		display: flex;
		align-items: center;
	}

	.dot {
		width: 8px;
		height: 8px;
		background-color: #007BFF;
		border-radius: 50%;
		margin: 0 3px;
		animation: dot-bounce 1.4s infinite ease-in-out both;
	}

	.dot:nth-child(1) {
		animation-delay: -0.32s;
	}

	.dot:nth-child(2) {
		animation-delay: -0.16s;
	}

	@keyframes dot-bounce {

		0%,
		80%,
		100% {
			transform: scale(0);
		}

		40% {
			transform: scale(1.0);
		}
	}
</style>